﻿<%--
  Created by IntelliJ IDEA.
  User: hongcy
  Date: 16-3-20
  Time: 下午9:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ include file="/include/taglib.jsp" %>
<link rel="stylesheet" href="/static/kindeditor-4.1.7/themes/default/default.css" />
<link rel="stylesheet" href="/static/kindeditor-4.1.7/plugins/code/prettify.css" />
<script charset="utf-8" src="/static/kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="/static/kindeditor-4.1.7/lang/zh_CN.js"></script>
<script charset="utf-8" src="/static/kindeditor-4.1.7/plugins/code/prettify.js"></script>
<div style="padding:20px 0px;">
    <form method="post" action="${ctx}/mulanweb/admin/visa/update" id="ff">
        <input type="hidden" name="visaId" id="targetId" value="${param.targetId}"/>
        <table cellspacing="5" style="margin: 0 auto">
            <tr>
                <td>标题:</td>
                <td><input name="title" id="detail_title" class="easyui-textbox"
                           data-options="required:true,validType:{length:[1,20]}" style="width: 260px;"/></td>
            </tr>
            <tr>
                <td>国家:</td>
                <td><input type="text" name="country" id="detail_country" class="easyui-textbox"
                           data-options="required:true,validType:{length:[1,20]}" style="width: 260px;"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">详情介绍:</td>
            </tr>
            <tr>
                <td colspan="2">
                        <textarea name="description" id="description" cols="100" rows="8"
                                  style="width:700px;height:200px;visibility:hidden;">
                        </textarea>
                </td>
            <tr>
                <td colspan="2">logo图:<input id="logoImage" type="file" size="30" name="fileselect" multiple/>
                </td>
            </tr>
            <tr>
                <td colspan="2">轮播图:<input id="fileImage" type="file" size="30" name="fileselect" multiple/></td>
            </tr>
        </table>
        <button id="photoSubmit" type="button" style="display: none"></button>
    </form>
    <div style="width:100%;height:auto;" id="detail-preview">
    </div>
</div>
<%!
    private String htmlspecialchars(String str) {
        str = str.replaceAll("&", "&amp;");
        str = str.replaceAll("<", "&lt;");
        str = str.replaceAll(">", "&gt;");
        str = str.replaceAll("\"", "&quot;");
        return str;
    }
%>
<script type="text/javascript">
    var params = {
        fileInput: $("#detail-fileImage").get(0),
        upButton: $("#photoSubmit").get(0),
        url: $("#ff").attr("action"),
        filter: function (files) {
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    if (file.size >= 512000) {
                        alert('您这张"' + file.name + '"图片大小过大，应小于500k');
                    } else {
                        arrFiles.push(file);
                    }
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },
        onSelect: function (files) {
            var html = '', i = 0;
            $("#detail-preview").html('<div class="upload_loading"></div>');
            var funAppendImage = function () {
                file = files[i];
                if (file) {
                    var reader = new FileReader()
                    reader.onload = function (e) {
                        html = html + '<div id="uploadList_' + i + '" style="float:left"><p>' +
                                '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a><br />' +
                                '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" width="80px" height="80px"/></p>' +
                                '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
                                '</div>';

                        i++;
                        funAppendImage();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $("#detail-preview").html(html);
                    if (html) {
                        //删除方法
                        $(".upload_delete").click(function () {
                            ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                            return false;
                        });
                        //提交按钮显示
                        $("#fileSubmit").show();
                    } else {
                        //提交按钮隐藏
                        $("#fileSubmit").hide();
                    }
                }
            };
            funAppendImage();
        },
        onDelete: function (file) {
            $("#uploadList_" + file.index).fadeOut();
        },
        onDragOver: function () {
            $(this).addClass("upload_drag_hover");
        },
        onDragLeave: function () {
            $(this).removeClass("upload_drag_hover");
        },
        onProgress: function (file, loaded, total) {
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.show().html(percent);
        },
        onSuccess: function (file, response) {
            $("#datagrid").datagrid("reload");
            $dialog.dialog("close");
            $("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
        },
        onFailure: function (file) {
            $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
            $("#uploadImage_" + file.index).css("opacity", 0.2);
        },
        onComplete: function () {
            //提交按钮隐藏
            $("#fileSubmit").hide();
            //file控件value置空
            $("#fileImage").val("");
            $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
        }
    };
    ZXXFILE = $.extend(ZXXFILE, params);
    ZXXFILE.init();

    var params1 = {
        fileInput: $("#detail-logoImage").get(0),
        upButton: $("#photoSubmit").get(0),
        url: $("#ff").attr("action"),
        filter: function (files) {
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    if (file.size >= 512000) {
                        alert('您这张"' + file.name + '"图片大小过大，应小于500k');
                    } else {
                        arrFiles.push(file);
                    }
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },
        onSelect: function (files) {
            var html = '', i = 0;
            $("#detail-preview").html('<div class="upload_loading"></div>');
            var funAppendImage = function () {
                file = files[i];
                console.info(file);
                if (file) {
                    var reader = new FileReader()
                    reader.onload = function (e) {
                        html = html + '<div id="uploadList_' + i + '" style="float:left"><p>' +
                                '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a><br />' +
                                '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" width="80px" height="80px"/></p>' +
                                '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
                                '</div>';
                        i++;
                        funAppendImage();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $("#detail-preview").html(html);
                    if (html) {
                        //删除方法
                        $(".upload_delete").click(function () {
                            ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                            return false;
                        });
                        //提交按钮显示
                        $("#fileSubmit").show();
                    } else {
                        //提交按钮隐藏
                        $("#fileSubmit").hide();
                    }
                }
            };
            funAppendImage();
        },
        onDelete: function (file) {
            $("#uploadList_" + file.index).fadeOut();
        },
        onDragOver: function () {
            $(this).addClass("upload_drag_hover");
        },
        onDragLeave: function () {
            $(this).removeClass("upload_drag_hover");
        },
        onProgress: function (file, loaded, total) {
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.show().html(percent);
        },
        onSuccess: function (file, response) {
            $("#datagrid").datagrid("reload");
            $dialog.dialog("close");
            $("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
        },
        onFailure: function (file) {
            $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
            $("#uploadImage_" + file.index).css("opacity", 0.2);
        },
        onComplete: function () {
            //提交按钮隐藏
            $("#fileSubmit").hide();
            //file控件value置空
            $("#fileImage").val("");
            $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
        }
    };
    ZXXFILE = $.extend(ZXXFILE, params1);
    ZXXFILE.init();
    function confirmDescription(){
        KindEditor.sync('textarea[name="description"]');
    }
    $(function () {
        createEdit();
        function createEdit() {
            var K = KindEditor;
            editor1 = K.create('textarea[name="description"]', {
                width: '100%',
                height: 400,
                newlineTag: 'br',
                cssPath: '${cdnContentPath}/static/kindeditor-4.1.7/plugins/code/prettify.css',
                uploadJson: '${ctx}/mulanweb/admin/photo/saveDetail',
                fileManagerJson: '${cdnContentPath}/static/kindeditor-4.1.7/plugins/code/prettify.css/jsp/file_manager_json.jsp',
                allowFileManager: true,
                afterCreate: function () {
                    var self = this;
                    K.ctrl(document, 13, function () {
                        self.sync();
                        document.forms['example'].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function () {
                        self.sync();
                        document.forms['example'].submit();
                    });
                }
            });
            prettyPrint();
        }
        var targetId = $("#targetId").val();
        if (targetId) {
            $.post(Constant.ctx("/mulanweb/admin/visa/getVisaDetail"), {visaId: targetId}, function (info) {
                if(info.ReturnCode == 1){
                    $("#detail_title").textbox("setValue",info.DataList.Title);
                    $("#detail_country").textbox("setValue",info.DataList.Country);
                    editor1.html(info.DataList.Description);
                }
                createEdit();
            });
        }
        $.post(Constant.ctx("/mulanweb/admin/photo/getPhotoList"),{targetId:targetId,typeId : 17},function(info){
            if(info.DataList){
                var html =  [];
                var data = info.DataList;
                console.info(info)
                for(var list in data){
                    var title = '<a onclick="deletePhoto(this,\''+data[list].Id+'\')" href="#">删除轮播图</a>';
                    if(data[list].TypeId == 18){
                        title = '<a onclick="deletePhoto(this,\''+data[list].Id+'\')" href="#" style="color:red">删除主图</a>';
                    }
                    var hh = '<div style="width:80px;height:80px;float:left;margin:5px;">'+
                             '<div>'+title+'</div>'+
                            '<div><img src="'+Constant.photoPath+data[list].Path+ '" width="80"/></div>'+
                            '</div>'
                    html.push(hh);
                }
                var tt = $("#detail-preview").html();
                $("#detail-preview").append(html.join(" "));
            }
        });
    })

    function deletePhoto(tt,photoId){
        $.post(Constant.ctx("/mulanweb/admin/photo/delete"),{photoId  :photoId},function(info){
            if(info.ReturnCode == "1" || info.ReturnCode == 1){
                $(tt).parent("div").parent("div").remove();
            }
            Constant.showMessage(info.AlertMessage, info.message, "操作完成");
        })
    }
</script>
